import React, { Component } from 'react'
import moment from 'moment'
import PropTypes from 'prop-types'
import { FormOutlined, DeleteOutlined } from '@ant-design/icons'
import style from './Row.module.less'
import { Space } from 'antd'

export default class Row extends Component {
  state = {
    hover: false
  }

  // 获取时间间隔
  getHours (d) {
    const { begin_datetime: b, end_datetime: e } = d
    const time = []
    time.push(moment(b * 1000).format('HH:mm'))
    time.push(moment(e * 1000).format('HH:mm'))
    return time.join('~')
  }

  render () {
    const alist = []
    const li = this.props.data
    const isOther = !li.caseid
    let k = ''
    if (!li) {
      return null
    }
    if (isOther) {
      k = '_redundant'
    }
    if (li['arbitrator' + k]) {
      alist.push(li['arbitrator' + k])
    }
    if (li['arbitrator1' + k]) {
      alist.push(li['arbitrator1' + k])
    }
    if (li['arbitrator2' + k]) {
      alist.push(li['arbitrator2' + k])
    }
    const rClass = [style['book-block']]
    if (this.state.hover) {
      rClass.push(style.active)
    }
    return (
      <div className={rClass.join(' ')} key={li.id} onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })}>
        <div className={style['book-block__header']}>案号编号：{isOther ? li.caseno_desc_redundant : li.caseno_desc}</div>
        <div className={style['book-block__line']}>经办秘书：{isOther ? li.processer_redundant : li.operator}</div>
        <div className={style['book-block__line']}>类型：{li.use}</div>
        <div className={style['book-block__line']}>仲裁员：{alist.join('、')}</div>
        <div className={style['book-block__line']}>开庭时间：{this.getHours(li)}</div>
        <div className={style['book-block__room']}>{li.name}</div>
        <div className={style['operate-icons']}>
          <Space size='small'>
            <div className={style['modify-icon']} onClick={() => this.props.modifyHandle(this.props.data)}><FormOutlined /></div>
            <div className={style['delete-icon']} onClick={() => this.props.cancelHandle(this.props.data)}><DeleteOutlined /></div>
          </Space>
        </div>
      </div>
    )
  }
}

Row.propTypes = {
  data: PropTypes.object,
  modifyHandle: PropTypes.func,
  cancelHandle: PropTypes.func
}

Row.defaultProps = {
  data: null,
  modifyHandle: () => {},
  cancelHandle: () => {}
}
